import { Component, OnChanges, Input } from '@angular/core';
import { EChartOption } from 'echarts';
import { TranslateService } from '@ngx-translate/core';

@Component({
    selector: 'itmp-realtime-traffic-flow',
    templateUrl: './realtime-traffic-flow.component.html',
    styleUrls: ['./realtime-traffic-flow.component.css']
})
export class RealtimeTrafficFlowComponent implements OnChanges {
    options: EChartOption;
    @Input()
    data: {
        lastday: any;
        thisday: any;
        xAxis: any;
    };
    @Input() titletext: String;

    constructor(private translate: TranslateService) {}
    ngOnChanges() {
        const tempTranslate = ['Today', 'Yesterday'];
        const translateData = [];
        tempTranslate.forEach(item => {
            this.translate.get('Data_Visualization.TrafficAnalytics.' + item).subscribe((res: string) => {
                translateData.push(res);
            });
        });
        setTimeout(() => {
            if (!this.data) {
                return;
            }
            this.options = {
                legend: {
                    textStyle: {
                        color: '#ffffff' //图例颜色
                    },
                    right: 20,
                    top: 0
                },
                backgroundColor: '#363a70', //背景色
                xAxis: {
                    axisLabel: {
                        interval: 0,
                        rotate: 45,
                        textStyle: {
                            //x轴座标文字颜色
                            color: '#fff'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'solid',
                            color: '#fff', //左边线的颜色
                            width: '1' //坐标线的宽度
                        }
                    },
                    type: 'category',
                    splitNumber: 12,
                    data: this.data.xAxis
                },
                yAxis: {
                    type: 'value',
                    splitNumber: 5,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            //轴座标文字颜色
                            color: '#fff'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'solid',
                            color: '#fff', //左边线的颜色
                            width: '1' //坐标线的宽度
                        }
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                color: ['#238CE6', '#FDD158'],
                series: [
                    {
                        name: translateData[1],
                        type: 'line',
                        data: this.data.lastday,
                        smooth: true,
                        symbol: 'circle',
                        lineStyle: {
                            color: '#238CE6'
                        }
                    },
                    {
                        name: translateData[0],
                        type: 'line',
                        data: this.data.thisday,
                        smooth: true,
                        symbol: 'circle',
                        lineStyle: {
                            color: '#FDD158'
                        }
                    }
                ]
            };
        });
    }
}
